﻿@{
	ViewBag.Title = "Manage Authors";
	Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

@model DirigoEdge.Areas.Admin.Models.ViewModels.ManageBlogAuthorsViewModel

<div class="row manageAuthors">

    <div class="twelve columns">

        <div class="contain">
            <h2 class="left"><i class="fa fa-users"></i> Manage Blog Authors</h2>
            <h2><a id="NewAuthor" class="right button" data-reveal-id="NewAuthorModal">New Author +</a></h2>
        </div>

        <div id="ManageAuthorTableContainer">
            <table id="ManageAuthorTable" class="twelve manageUsersTable manageTable">
                <thead>
                    <tr>
                        <th class="hide-for-small">Thumbnail</th>
                        <th>User Name</th>
                        <th class="hide-for-small">User Image Location</th>
                        <th>Is Active</th>
                        <th class="actions">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @{
					    foreach (var user in Model.Users)
					    {
						    string active = user.IsActive ? "True" : "False";
                            <tr>
                                <td class="imageLocation hide-for-small">
                                    <img width="80" src="@user.UserImageLocation" /></td>
                                <td class="displayName">@user.DisplayName</td>
                                <td class="hide-for-small"><a class="has-tip" href="javascript:void(0);" title="<img src='@user.UserImageLocation' alt='Image Not Found'>">@user.UserImageLocation</a></td>
                                <td class="isActive">@active</td>
                                <td>
                                    <a class="editUser button small secondary tabletMarginBottom" href="javascript:void(0);" data-id="@user.UserId">Edit</a>
                                    <a class="deleteUser button small secondary" href="javascript:void(0);" data-id="@user.UserId">Delete</a>
                                </td>
                            </tr>
					    }
                    }
                </tbody>
            </table>
        </div>
    </div>

</div>

@section Modals {
    <div id="NewAuthorModal" class="reveal-modal">
        <div class="content">
            <h2>Create New Author :</h2>
            <p class="hide lead">Create a new Username</p>

            <form class="custom">
                <label>User Name</label>
                <input id="NewUserName" type="text" placeholder="User Name" autocomplete="off" />

                <label>Image Location</label>
                <input id="NewUserImage" type="text" autocomplete="off" />

                <label for="IsActiveBox">
                    <input type="checkbox" id="IsActiveBox" checked="checked" style="display: none;" autocomplete="off">
                    <span id="NewUserIsActiveBox" class="custom checkbox"></span> Is Active
                </label>
            </form>

            <a id="CreateAuthorButton" class="button right">Create</a>
        </div>

        <a class="close-reveal-modal">&#215;</a>
    </div>

    <div id="ModifyAuthorModal" class="reveal-modal">
        <div class="content">
            <h2>Modify Author.</h2>
            <p class="hide lead">Modify a blog user.</p>

            <form class="custom">
                <label>User Name</label>
                <input type="text" id="ModUserName" autocomplete="off" />

                <label>Image Location</label>
                <input type="text" id="ModUserImageLocation" autocomplete="off" />

                <label for="ModUserIsActiveBox">
                    <input type="checkbox" id="ModUserIsActiveBox" style="display: none;" autocomplete="off">
                    <span id="ModUserIsActiveBoxOver" class="custom checkbox"></span><span> Is Active</span>
                </label>
            </form>

            <a id="ModifyAuthorButton" class="button right">Update</a>
        </div>
        
        <a class="close-reveal-modal">&#215;</a>
    </div>

    <div id="DeleteAuthorModal" class="reveal-modal">
        <h2>Delete Author.</h2>
        <p class="lead">Do you want to <em>permanently</em> delete <span id="DelUserName"></span>?</p>
        <p>Note : User Uploaded Images will need to be manually removed from the file system.</p>

        <a id="DeleteAuthorButton" class="button right confirmModalButton">Delete</a>
        <a id="CancelDeleteButton" class="button right secondary">Cancel</a>
        <a class="close-reveal-modal">&#215;</a>
    </div>
}

@section Scripts {
    @{
        <script src="/Areas/Admin/Scripts/jquery/plugins/jquery.dataTables.min.js"></script>
    }
}